<template>
  <a-card :bordered="false">
    <div class="layout_flex">
      <div class="l_left">反馈情况</div>
      <div class="l_right">
        <a-row class="l_right_box">
          <a-col :span="8"> 受害人手机号：{{listDetails.victimPhone?listDetails.victimPhone:'无'}} </a-col>
          <a-col :span="8"> 诈骗类型：{{listDetails.fraudType?listDetails.fraudType:'无'}} </a-col>
          <a-col :span="8"> 操作次数：{{listDetails.accessNumber?listDetails.accessNumber:'无'}} </a-col>
          <a-col :span="8"> 涉诈网站：{{listDetails.accessDomainName?listDetails.accessDomainName:'无'}} </a-col>
          <a-col :span="8"> 网站标题：{{listDetails.siteTitle?listDetails.siteTitle:'无'}} </a-col>
          <a-col :span="8"> 网站截图：
            <img v-if="listDetails.siteScreenshotUrl" @click="seeImages(listDetails.siteScreenshotUrl)" :src="`${listDetails.siteScreenshotUrl}`" title="点击查看大图" style="max-width:200px;max-height: 130px;cursor: pointer;" />
            <span v-else>无</span>
          </a-col>
        </a-row>
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="处置方式" prop="disposalMethod">
            <j-multi-select-tag v-model="form.disposalMethod" dictCode="disposal_pattern" type="checkbox" />
          </a-form-model-item>
          <a-form-model-item label="接听状态" prop="voiceStatus" v-if="getPropBool('key7')">
            <a-radio-group v-model="form.voiceStatus">
              <a-radio v-for="(item, key) in voiceStatus" :key="key" :value="item.value">{{ item.label }}</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="封停账号" prop="accountDeal" v-if="getPropBool('key1')">
            <j-multi-select-tag v-model="form.accountDeal" dictCode="close_account" type="checkbox" />
          </a-form-model-item>
          <a-form-model-item label="反馈情况" prop="feedbackSituation" v-if="getPropBool('key2')">
            <a-radio-group v-model="form.feedbackSituation" @change="onChangeFeedback">
              <a-radio v-for="(item, key) in feedbackSituations" :key="key" :value="item.value">{{ item.label }}</a-radio>
            </a-radio-group>
            <div class="a-form-div">
              <j-multi-select-tag v-model="form.feedbackSituationExt" dictCode="feedback_situation" type="checkbox" />
            </div>
          </a-form-model-item>
          <a-form-model-item label="已接情况" prop="situationCalled" v-if="getPropBool('key3')">
            <j-dict-select-tag type="radio" v-model="form.situationCalled" placeholder="请选择" dictCode="telephone_contact" />
          </a-form-model-item>
          <a-form-model-item label="未接原因" prop="situationNoPhone" v-if="getPropBool('key4')">
            <j-dict-select-tag type="radio" v-model="form.situationNoPhone" placeholder="请选择" dictCode="not_telephone_contact" />
          </a-form-model-item>
          <a-form-model-item label="反馈结果" prop="feedbackResult" v-if="getPropBool('key2')">
            <a-radio-group v-model="form.feedbackResult">
              <a-radio value="1"> 未被骗 </a-radio>
              <a-radio value="2"> 已被骗 </a-radio>
              <!--反馈情况为未电话联系 v-if="getKeysBool('feedbackSituation', 1)"-->
              <a-radio value="0"> 未知 </a-radio>
            </a-radio-group>
            <div class="a-form-div">
              <a-checkbox-group v-model="form.feedbackResultExts" :options="[{ label: '回访', value: 'a' }]" @change="onChangeFeedbackExt" />
            </div>
          </a-form-model-item>
          <a-form-model-item label="是否报案" v-if="getPropBool('key5')">
            <a-radio-group v-model="form.cheatedReportStatus">
              <a-radio v-for="(item, key) in cheatedReportStatuss" :key="key" :value="item.value">{{ item.label }}</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item class="ant-form-item-input" label="被骗时间" v-if="getPropBool('key5')">
            <a-date-picker v-model="form.cheatedTime" valueFormat="YYYY-MM-DD" type="date" placeholder="请选择" style="width: 100%" />
          </a-form-model-item>
          <a-form-model-item class="ant-form-item-input" label="被骗地点" v-if="getPropBool('key5')">
            <a-input placeholder="请输入" v-model="form.cheatedLocation" />
          </a-form-model-item>
          <a-form-model-item label="未被骗状态" v-if="getPropBool('key6')">
            <j-dict-select-tag type="radio" v-model="form.notCheatedStatus" placeholder="请选择" dictCode="not_cheated_status" />
          </a-form-model-item>
          <a-form-model-item class="ant-form-item-input" label="止损金额" v-if="getPropBool('key6')">
            <a-input placeholder="请输入整数" v-model="form.notCheatedStoplossAmount" suffix="/元" />
          </a-form-model-item>
          <a-form-model-item class="ant-form-item-input" label="被骗金额" v-if="getPropBool('key5')">
            <a-input placeholder="请输入整数" v-model="form.cheatedFraudAmount" suffix="/元" />
          </a-form-model-item>
          <a-form-model-item class="ant-form-item-input" label="被骗内容" v-if="getPropBool('key5')">
            <a-input v-model="form.cheatedContent" placeholder="请输入" />
          </a-form-model-item>
          <!--反馈情况为已电话联系-->
          <a-form-model-item v-if="getPropBool('key3')">
            <template slot="label">
              归属地
              <a-tooltip placement="leftTop">
                <template slot="title">
                  <span>根据预警速报列表中的市/县字段是否一致进行判断</span>
                </template>
                <a-icon type="question-circle" style="vertical-align: middle;color: #666;" />
              </a-tooltip>
            </template>
            <a-radio-group v-model="form.lgsdsfyz" button-style="solid">
              <a-radio-button v-for="(item, key) in lgsdsfyzs" :key="key" :value="item.value">{{ item.label }}</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="诈骗类型" class="ant-form-item-input" v-if="getPropBool('key2')">
            <j-dict-select-tag v-model="form.fraudTypeDictKey" placeholder="请选择" dictCode="fraud_type" />
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="onSubmit"> 确定 </a-button>
            <a-button style="margin-left: 10px" @click="handleCloseCurrentPage"> 取消 </a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
    </div>
    <j-modal
      :width="1000"
      :visible="visibleModal"
      :footer="null"
      switchFullscreen
      @ok="handleCancel"
      @cancel="handleCancel"
      cancelText="关闭">
      <div style="text-align: center;">
        <img :src="siteScreenshotUrl" alt="" style="max-width:100%;text-align: center;">
      </div>
  </j-modal>
  </a-card>
</template>

<script>
import { getDictItemsFromCache } from '@/api/api'
import { getDissuadePhone, dissuadePhone } from '@/api/warning/WarningData.js'
export default {
  inject:['closeCurrent'],
  data() {
    return {
      labelCol: { span: 3 },
      wrapperCol: { span: 15 },
      form: {},
      userList: [],
      // 反馈情况数组
      feedbackSituations: [
        {label: '未电话联系', value: 1},
        {label: '已电话联系', value: 2}
      ],
      // 接听状态数组
      voiceStatus: [
        {label: '已接听', value: '1'},
        {label: '未接听', value: '2'},
        {label: '发送中', value: '3'}
      ],
      // 是否报案数组
      cheatedReportStatuss: [
        {label: '是', value: 1},
        {label: '否', value: 0}
      ],
      // 归属地数组
      lgsdsfyzs: [
        {label: '一致', value: 1},
        {label: '不一致', value: 0}
      ],
      listDetails: {},
      visibleModal: false,
      warningEvtid: null,
      fraudType: null,
      siteScreenshotUrl: null,
      rules: {
        disposalMethod: [
          { required: true, message: '请选择处置方式', trigger: 'change', }
        ],
        feedbackSituation: [
          { required: true, message: '请选择反馈情况', trigger: 'change' },
        ],
        voiceStatus: [
          { required: true, message: '请选择接听状态', trigger: 'change' }
        ],
        feedbackResult: [
          { required: true, message: '请选择反馈结果', trigger: 'change' }
        ],
        feedbackResult1: [
          { required: true, message: '请选择反馈结果', trigger: 'change' }
        ],
        situationNoPhone: [
          { required: true, message: '请选择未接原因', trigger: 'change' }
        ],
        situationCalled: [
          { required: true, message: '请选择已接情况', trigger: 'change' }
        ],
      }
    }
  },
  created() {
    if(Object.keys(this.$route.query).length>0 && this.$route.query.params) {
      let $route = JSON.parse(this.$route.query.params)
      this.warningEvtid = $route.warningEvtid ? $route.warningEvtid:null
      this.fraudType = $route.fraudType ? $route.fraudType:null
      this.userList = [
        {
          msisdn: $route.msisdn ? $route.msisdn:null,
          victimId: $route.victimId ? $route.victimId:null,
          sourceFrom: $route.sourceFrom ? $route.sourceFrom:null,
          eventTime: $route.warningTime ? $route.warningTime:null
        }
      ]
      this.listDetails = {
        victimPhone: $route.msisdn ? $route.msisdn:null,
        fraudType: $route.fraudType ? $route.fraudType:null,
        accessNumber: $route.accessNumber ? $route.accessNumber:null,
        accessDomainName: $route.accessDomainName ? $route.accessDomainName:null,
        siteTitle: $route.siteTitle ? $route.siteTitle:null,
        siteScreenshotUrl: $route.siteScreenshotUrl ? $route.siteScreenshotUrl:null
      }
      if($route.victimId && $route.warningTime) {
        this.getDissuade($route.victimId, $route.warningTime)
      }
    }
  },
  methods: {
    getDissuade(victimId, warningTime) {
      const parameter = {
        victimId: victimId,
        eventTime: warningTime
      }
      getDissuadePhone(parameter).then((res) => {
        if (res.success) {
          this.form = Object.assign({}, res.result)
          // 回访
          if( Object.keys(this.form).length>0 && this.form.feedbackResultExt) {
            this.$set(this.form, 'feedbackResultExts', [this.form.feedbackResultExt])
          }
          // 诈骗类型 (值为空回填，已有值不改变)
          if( Object.keys(this.form).length>0 && !this.form.fraudTypeDictKey) {
            this.$set(this.form, 'fraudTypeDictKey', this.fraudType)
          }
        } else {
          this.$message.warn(res.message);
        }
      }).catch(e=>{
        this.$message.warn("请求失败！");
      })
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let obj = Object.assign({}, this.form, {warningEvtid: this.warningEvtid, userList: this.userList, feedbackResultContent: this.getFeedbackResultContent()})
          dissuadePhone(obj).then((res) => {
            if (res.success) {
              this.$message.success(res.message);
              this.handleCloseCurrentPage()
            } else {
              this.$message.warn(res.message);
            }
          }).catch(e=>{
            this.$message.warn("请求失败！");
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getFeedbackResultContent() {
      // 处置方式不只等于短信预警
      if(this.form && this.form.disposalMethod && this.form.disposalMethod!=='b') {
        const feedbackSituation = this.form.feedbackSituation? '反馈情况：' + this.getItemsFrom(this.feedbackSituations, this.form.feedbackSituation):''
        const fraudTypeDictKey = this.form.fraudTypeDictKey? ',诈骗类型：' + this.filterMultiDictText('fraud_type', this.form.fraudTypeDictKey) :''
        let feedbackResultContent = feedbackSituation + fraudTypeDictKey
        let feedbackResultContent1, feedbackResultContent2, feedbackResultContent3
        // 反馈情况为未电话联系
        if (this.form.feedbackSituation==1) {
          feedbackResultContent1 =
          this.form.situationNoPhone? ',未接原因：' + this.filterMultiDictText('not_telephone_contact', this.form.situationNoPhone):''
        } else if(this.form.feedbackSituation==2) {// 反馈情况为已电话联系
          const situationCalled = this.form.situationCalled? ',已接情况：' + this.filterMultiDictText('telephone_contact', this.form.situationCalled):''
          const lgsdsfyz = this.form.lgsdsfyz || this.form.lgsdsfyz===0? ',归属地：' + this.getItemsFrom(this.lgsdsfyzs, this.form.lgsdsfyz):''
          feedbackResultContent2 = situationCalled + lgsdsfyz
          if(this.form.feedbackResult==1) {
            const notCheatedStatus = this.form.notCheatedStatus? ',未被骗状态：' + this.filterMultiDictText('not_cheated_status',this.form.notCheatedStatus):''
            const notCheatedStoplossAmount = this.form.notCheatedStoplossAmount? ',止损金额：' + this.form.notCheatedStoplossAmount+'/元':''
            feedbackResultContent2 = feedbackResultContent2 + notCheatedStatus + notCheatedStoplossAmount
          }
        }
        if(this.form.feedbackResult==2) { // 反馈结果为已被骗
          const cheatedReportStatus = this.form.cheatedReportStatus || this.form.cheatedReportStatus===0? ',是否报案：' + this.getItemsFrom(this.cheatedReportStatuss, this.form.cheatedReportStatus):''
          const cheatedTime = this.form.cheatedTime? ',被骗时间：' + this.form.cheatedTime :''
          const cheatedLocation = this.form.cheatedLocation? ',被骗地点：' + this.form.cheatedLocation :''
          const cheatedFraudAmount = this.form.cheatedFraudAmount? ',被骗金额：' + this.form.cheatedFraudAmount+'/元' :''
          const cheatedContent = this.form.cheatedContent? ',被骗内容：' + this.form.cheatedContent :''
          feedbackResultContent3 = cheatedReportStatus + cheatedTime + cheatedLocation + cheatedFraudAmount + cheatedContent
        }
        
        let Result
        if (feedbackResultContent3) {
          Result = feedbackResultContent + (feedbackResultContent1? feedbackResultContent1: feedbackResultContent2) +feedbackResultContent3
        } else {
          Result = feedbackResultContent + (feedbackResultContent1? feedbackResultContent1: feedbackResultContent2) 
        }
        return Result
      } else {
        return null
      }
    },
    // 反馈情况为未电话联系时，反馈结果非必选；反馈情况为已电话联系时，反馈结果必选
    onChangeFeedback(e) {
      if (e.target.value==1) {
        this.rules.feedbackResult[0].required = false
      } else {
        this.rules.feedbackResult[0].required = true
      }
    },
    // 反馈情况为未电话联系时，反馈结果非必选；反馈情况为已电话联系时，反馈结果必选
    onChangeFeedback1(e) {
      if (e.target.value==1) {
        this.rules.feedbackResult1[0].required = false
      } else {
        this.rules.feedbackResult1[0].required = true
      }
    },
    // 反馈结果-回访操作
    onChangeFeedbackExt(checkedValues) {
      this.$set(this.form, 'feedbackResultExt', checkedValues.toString())
    },
    getPropBool(prop) {
      let bool = false
      switch(prop){
        case 'key1': //处置方式包含账号处置时，才显示封停账号
          bool = this.getKeysBool('disposalMethod', 'd', 'includes')
          break;
        case 'key2': //处置方式只等于短信预警，都不显示对应项；处置方式只等于智能语音预警或者只有短信预警和智能语音预警时，只显示接听状态项；处置方式不只有短信预警和智能语音预警时，显示对应的选项
          bool = bool =
            !this.getKeysBool('disposalMethod', 'b', 'includes-equals') &&
            !this.getKeysBool('disposalMethod', 'e', 'includes-equals') &&
            !this.getKeysBool('disposalMethod', 'b,e', 'includes-equals') &&
            !this.getKeysBool('disposalMethod', 'e,b', 'includes-equals')
          break;
        case 'key3': //处置方式包含短信预警，且不只等于短信预警时，并反馈情况为已电话联系时，显示对应的选项
          bool = !this.getKeysBool('disposalMethod', 'b', 'includes-equals') && this.getKeysBool('feedbackSituation', 2) && this.getKeysBool('disposalMethod', 'a', 'includes')
          break;
        case 'key4': //处置方式包含短信预警，且不只等于短信预警时，并反馈情况为未电话联系时，显示对应的选项
          bool = !this.getKeysBool('disposalMethod', 'b', 'includes-equals') && this.getKeysBool('feedbackSituation', 1) && this.getKeysBool('disposalMethod', 'a', 'includes')
          break;
        case 'key5': //处置方式包含短信预警，且不只等于短信预警时，并反馈结果为已被骗时，显示对应的选项
          bool = !this.getKeysBool('disposalMethod', 'b', 'includes-equals') && this.getKeysBool('feedbackResult', '2') && this.getKeysBool('disposalMethod', 'a', 'includes')
          break;
        case 'key6': //处置方式包含短信预警，且不只等于短信预警时，并反馈情况为已电话联系和反馈结果为未被骗
          bool = !this.getKeysBool('disposalMethod', 'b', 'includes-equals') && this.getKeysBool('feedbackSituation', 2) && this.getKeysBool('feedbackResult', '1') && this.getKeysBool('disposalMethod', 'a', 'includes')
          break;
        case 'key7': //处置方式包含智能语音预警，才显示接听状态
          bool = this.getKeysBool('disposalMethod', 'e', 'includes')
          break;
      }
      return bool
    },
    // 满足条件，显示隐藏选项
    getKeysBool(field, value, type) {
      let bool = false
      if(Object.keys(this.form).length> 0 && field && this.form[field]) {
        // 等于
        if (type==undefined &&  this.form[field]==value) bool = true
        // 包含 includes
        if (type=='includes' &&  this.form[field].includes(value)) bool = true
        // 包含且等于
        if (type=='includes-equals' &&  this.form[field].includes(value) && this.form[field]==value) bool = true
      }
      return bool
    },
    filterMultiDictText(dictCode, text) {
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
    getItemsFrom(datas, key) {
      let item = datas.filter(t => t["value"] == key)
      if(item && item.length>0){
        return item[0]["label"]
      }
    },
    handleCloseCurrentPage() {
      // 注意：以下代码必须存在
      // inject:['closeCurrent'],
      this.closeCurrent()
      this.$router.push("/earlyWarning/express")
    },
    seeImages(siteScreenshotUrl) {
      this.siteScreenshotUrl = siteScreenshotUrl
      this.visibleModal = true
    },
    handleCancel() {
      this.visibleModal = false;
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.layout_flex {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  border: 1px #e1e1e1 solid;
  .l_left {
    flex: 0 0 200px;
    background-color: #81d3f82a;
    border-right: 1px #e1e1e1 solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }
  .l_right {
    flex: 1;
    min-height: 400px;
    .l_right_box {
      border-bottom: 1px #e1e1e1 solid;
      padding: 14px 0 8px;
      margin-bottom: 20px;
      > * {
        text-indent: 2em;
        padding-bottom: 6px;
      }
    }
  }
}
.a-form-div {
  background-color: #f5f5f5;
  padding: 10px 14px;
}
.ant-form-item-input {
  /deep/.ant-form-item-control-wrapper {
    width: 40%;
 }
}
</style>